<template>
  <div class="login-bg flex a-c j-c">
    <div class="draw">
      <vue-particles
        color="#7B68EE"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#7B68EE"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="false"
        clickMode="push"
      >
        <!-- https://blog.csdn.net/bamboozjy/article/details/86610356 -->
      </vue-particles>
    </div>

    <!-- 登录框 -->
    <a-form
      id="components-form-demo-normal-login"
      :form="form"
      class="login-form"
      @submit="handleSubmit"
    >
      <a-form-item>
        <a-input
          v-decorator="[
          'userName',
          { rules: [{ required: true, message: '请正确的输入您的用户名!' }] },
        ]"
          placeholder="Username"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          v-decorator="[
          'password',
          { rules: [{ required: true, message: '请正确的输入您的密码!' }] },
        ]"
          type="password"
          placeholder="Password"
        >
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-checkbox
          class="jizhu"
          v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          },
        ]"
        >记住密码</a-checkbox>

        <a-button
          style="float:right"
          type="primary"
          html-type="submit"
          class="login-form-button"
        >登 录</a-button>
Or
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$message.success(
            "登录成功",
            1,
            ()=>{this.$router.push("/")}
          );
          
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login-bg {
  height: 100vh;
  background: #000;
  overflow: hidden;
}

.particles-js {
  background-image: url(/static/img/sky.871d198.jpg);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -9;
}
.draw {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

// 登录框设置
.login-form {
  width: 60vh;
  height: 40vh;
  margin: 25vh auto;
  padding: 5vh;
  border-radius: 5vh;
  background: rgba($color: #313131, $alpha: 0.1);
  /deep/ {
    .anticon {
      color: #fff !important;
    }
    input {
      background: rgba($color: #313131, $alpha: 0.5);
      border-color: #5e5e5e;
      color: #fff;
    }
    .jizhu {
      color: #cccccc;
    }
  }
}
</style>